<template>
  <div class="my404">
    <svg-icon icon-class="404" class-name="custom-class"></svg-icon>
    <div class="cu-box">{{ cu }}秒后将返回到首页</div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "404",
  setup() {
    const custart=10
    const cu = ref(custart);
    let timer: any;
    const endfn = () => {
      if (cu.value == 0) {
        
        clearInterval(timer);
        cu.value=custart;
        router.replace({
          path: "/",
        });
      } else {
        cu.value--;
        timer = setInterval(endfn, 1000);
      }
    };
    const router = useRouter();

    onMounted(() => {
      endfn();
    });
    return {
      cu,
      endfn,
    };
  },
});
</script>
<style lang="scss">
.my404 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  flex-direction: column;
}
.custom-class {
  color: red;
  font-size: 8em;
}
.cu-box {
  margin-top: 20px;
}
</style>